import { ReactElement, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Result, Button } from 'antd'
import style from './index.module.less'
import Sider from './components/sider'
import Header from './components/header'
import PageList from './components/pageList'
import Footer from './components/footer'
import { useSelector } from 'react-redux';
import { INIT_GLOBAL_EVENT_STATE } from '@redux/reducers/globalEvent';

function Main (): ReactElement {
  const { scrollList, resizeList } = useSelector((state: { globalEvent: INIT_GLOBAL_EVENT_STATE }) => {
    return {
      scrollList: state.globalEvent.scrollList,
      resizeList: state.globalEvent.resizeList
    }
  })
  useEffect(() => {
    function scrollHandle () {
      scrollList.forEach(({ handle }) => {
        handle()
      })
    }
    window.addEventListener('scroll', scrollHandle)
  }, [scrollList])
  useEffect(() => {
    function resizeHandle () {
      resizeList.forEach(({ handle }) => {
        handle()
      })
    }
    window.addEventListener('resize', resizeHandle)
    return () => {
      window.removeEventListener('resize', resizeHandle)
    }
  }, [scrollList, resizeList])
  return (
    <div className={style.admin}>
      <div className={style.admin__sider}>
        <Sider />
      </div>
      <div className={style.admin__content}>
        <Header />
        <div className={style.admin__page}>
          <PageList />
        </div>
        <Footer />
      </div>
    </div>
  )
}

export default Main
